<template>
	<view>
		<nav-header title="收货地址" :showRight="false"></nav-header>
		<view class="nickname">
			<view class="form">
				<!-- <view class="title">
					<text class="text-sm-Medium">收货地址</text>
				</view> -->
				<uni-forms :modelValue="userInfo" :rules="rules">
					<uni-forms-item name="receiver">
						<view style="margin-bottom: 20rpx;">
							<text class="txt">姓名：</text>
						</view>
						<uni-easyinput type="text" v-model="userInfo.receiver" placeholder="请输入收货人姓名"
							:inputBorder="false" clearable maxlength="10"/>
					</uni-forms-item>
					<uni-forms-item name="phone">
						<view style="margin-bottom: 20rpx;">
							<text class="txt">电话：</text>
						</view>
						<uni-easyinput type="text" v-model="userInfo.phone" placeholder="请输入收货人电话号码"
							:inputBorder="false" clearable maxlength="11"/>
					</uni-forms-item>
					<view style="margin-bottom: 30rpx;" class="picker">
						<text class="txt">地区：</text>
						<picker mode="region" @change="pickerdetail">
							<view v-if="userInfo.province">
								{{ userInfo.province }} - {{ userInfo.city }} - {{ userInfo.district }}
							</view>
							<view v-else>
								<text>点击选择</text>
							</view>
						</picker>
					</view>
					<uni-forms-item name="detail">
						<view style="margin-bottom: 20rpx;">
							<text class="txt">详细地址：</text>
						</view>
						<uni-easyinput type="text" v-model="userInfo.detail" placeholder="如街道、门牌号、小区、乡镇、村等"
							:inputBorder="false" clearable maxlength="80"/>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="commit">
				<view class="button-style">
					<button class="btncolor" @click="submitForm()">
						<text class="text-md-Medium" style="color: #fff;">保存</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					  "receiver": "", // 50字符
					  "phone": "",
					  "province": "", // 长省份名称
					  "city": "",
					  "district": "",
					  //"isDefault": 1,
					  "detail": "" // 约80字符
				},
				rules: {
					receiver: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入电话号码',
						}]
					},
					detail: {
						rules: [{
							required: true,
							errorMessage: '请输入收货地址',
						}]
					},
				},
			}
		},
		methods: {
			pickerdetail(e){
				let pickerlist = e.detail.value
				this.userInfo.province = pickerlist[0]
				this.userInfo.city = pickerlist[1]
				this.userInfo.district = pickerlist[2]
			},
			submitForm() {
				if(this.userInfo.receiver == "" || 
				this.userInfo.phone == "" ||
				this.userInfo.province == "" ||
				this.userInfo.detail == ""){
					uni.showToast({
						title: "姓名，电话或者省市区和地址不能为空",
						icon: 'none'
					});
					return;
				}
				this.$http({
					url: "/mall/address/addAddress",
					method: 'POST',
					data:this.userInfo
				}).then(res => {
					uni.showToast({
						title: "保存成功",
						icon: 'none'
					});
					uni.navigateBack({delta:1})
				})
			},
			getdetail(){
				this.$http({
					url: "/mall/address/default",
					method: 'GET'
				}).then(res => {
					if(res){
						this.userInfo = res
					}
				})
			}
		},
		onLoad() {
			this.getdetail()
		}
	}
</script>

<style lang="scss" scoped>
	.nickname {
		width: 100%;

		.form {
			display: flex;
			flex-direction: column;
			padding: 24rpx 32rpx;
			gap: 24rpx;

			:deep(.uni-forms) {
				height: 88rpx;
			}

			:deep(.uni-easyinput__content-input) {
				height: 40rpx;
				padding: 24rpx 32rpx;
				background-color: $gray-100;
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.tip {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// font-size: 25rpx;
				color: $gray-400;
			}
		}



		.commit {
			width: 100%;
			position: fixed;
			bottom: 42rpx;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.button-style {
				padding: 24rpx 32rpx;
				width: 100%;
			}

			.btncolor[disabled] {

				background-color: $brand-400;
			}

			.btncolor {
				width: 100%;
				background-color: $brand-500;
				color: $white;
				border-radius: 34rpx;
				padding: 8rpx 24rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}
		.picker{
			display: flex;
		}
		.txt {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}
</style>